﻿@model XT.Model.Room

@{
    ViewBag.Title = "Photos";
    Layout = "~/Views/Global/Layout.cshtml";
}
<script src="/Scripts/Room/Photos.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>


<div class="housemapmargin">
    <div id="map-canvas" style="height: 299px; box-shadow: 0px 1px 1px white; display: block;"></div>

</div>
<div class="hero2" style="background-image: url('/Images/image7.png')">
    <a href=' @Url.Action("Index", "Host", new { id = Model.Room_List.Account.Id })' class="houseavamargin">
        <img class="houseavaimg" src="/Images/ava.jpg" /></a>
    <div class="container">
        <div class="housedetail">

            <h2>@Model.Room_Name</h2>
            <ul>


                <li>Giá phòng: $@Model.Room_Price</li>
                <li>Loại phòng: @Model.Room_Type.Room_Type_Name</li>
                <li>Số điện thoại: @Model.Room_List.Account.Account_Phone</li>
                <li>Địa chỉ: @Model.Room_Address</li>
            </ul>
        </div>
    </div>
</div>
<div class="roomedit">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-edit"></span>Chỉnh sửa thông tin</button>
</div>
<div class="pricetag">
    <p>$@Model.Room_Price</p>
</div>
<div style="background-color: rgb(250, 250, 250); padding-top: 20px">
    <div class="container ">
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title" style="font-size: 25px; font-weight: bold">Album ảnh nhà trọ</h3>
                    <div class="addphoto">
                        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span>Thêm ảnh</button>
                    </div>
                </div>

            </div>
            <div class="row">

                <div class="col-xs-6 col-md-3">
                    <a class="thumbnail" href="#">
                        <img src="/Images/image1.png" data-src="holder.js/100%x180" alt="..." style="height: 120px" class="photoimg" />
                    </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a class="thumbnail" href="#">
                        <img src="/Images/image2.png" data-src="holder.js/100%x180" alt="..." style="height: 120px" class="photoimg" />
                    </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a class="thumbnail" href="#">
                        <img src="/Images/image3.png" data-src="holder.js/100%x180" alt="..." style="height: 120px" class="photoimg" />
                    </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a class="thumbnail" href="#">
                        <img src="/Images/image4.png" data-src="holder.js/100%x180" alt="..." style="height: 120px" class="photoimg" />
                    </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a class="thumbnail" href="#">
                        <img src="/Images/q3.jpg" data-src="holder.js/100%x180" alt="..." style="height: 120px" class="photoimg" />
                    </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a class="thumbnail" href="#">
                        <img src="/Images/image4.png" data-src="holder.js/100%x180" alt="..." style="height: 120px" class="photoimg" />
                    </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a class="thumbnail" href="#">
                        <img src="/Images/image3.png" data-src="holder.js/100%x180" alt="..." style="height: 120px" class="photoimg" />
                    </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a class="thumbnail" href="#">
                        <img src="/Images/image2.png" data-src="holder.js/100%x180" alt="..." style="height: 120px" class="photoimg" />
                    </a>
                </div>

            </div>
        </div>
    </div>
    <div id="modalDiv">
        <a id="imgnext" class="imgpre" href="javascript:;"></a>
        <a id="imgpre" class="imgnext" href="javascript:;"></a>
        <a id="thoat" class="thoat" href="javascript:;">x</a>
        <div class="image">
            <img alt="" src="" />
        </div>

    </div>
    <div id="modalBackground"></div>
</div>

